<template>
  <div
    class="app-main-content"
    style="height: 96%">
    <div>
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-button
            v-oauth
            data-oauthUuid="1620438174000"
            icon="el-icon-plus"
            type="primary"
            @click="createTop">
            创建
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438199000"
            type="primary"
            icon="el-icon-edit"
            :disabled="selectedTableNode.length !== 1"
            @click="modifyTop">
            修改
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438218000"
            icon="el-icon-delete"
            type="danger"
            :disabled="selectedTableNode.length === 0"
            @click="deleteTop">
            删除
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438235000"
            icon="el-icon-circle-check"
            type="success"
            :disabled="selectedTableNode.length === 0"
            @click="comfirm">
            确认
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438269000"
            icon="el-icon-document-copy"
            type="primary"
            :disabled="selectedTableNode.length === 0"
            @click="product">
            生产
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438269000"
            icon="el-icon-lock"
            type="primary"
            :disabled="selectedTableNode.length === 0"
            @click="product">
            申请封锁
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438269000"
            icon="el-icon-unlock"
            type="primary"
            :disabled="selectedTableNode.length === 0"
            @click="product">
            申请解封
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438269000"
            icon="el-icon-printer"
            type="primary"
            :disabled="selectedTableNode.length === 0"
            @click="product">
            打印合同传递卡
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438269000"
            icon="el-icon-printer"
            type="primary"
            :disabled="selectedTableNode.length === 0"
            @click="product">
            打印变更申请
          </el-button>
        </div>
        <div>
          <el-button @click="reset">
            重置
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438318000"
            type="primary"
            @click="showSearchDialog">
            查询
          </el-button>
        </div>
      </div>
      <div style="margin-top: 16px;">
        <scmsa-table
          ref="table"
          v-loading="loading"
          highlight-current-row
          :column="tablecolumn"
          :data="tableDatas"
          pagination
          :height="tableTopHeight"
          :total="total"
          border
          align="center"
          :current-page="query.page"
          :page-size="query.size"
          :row-key="(row) => row.id"
          @current-change="handleCurrentChange"
          @selection-change="selectionRowsChange"
          @size-change="handlePageSizeChange"
          @pagination-current-change="handlePageCurrentChange" />
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-button
            v-oauth
            data-oauthUuid="1620438362000"
            icon="el-icon-plus"
            type="primary"
            :disabled="!currentRow"
            @click="createChild">
            创建
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438377000"
            type="primary"
            icon="el-icon-edit"
            :disabled="selectedChildNode.length !== 1"
            @click="modifyChild">
            修改
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438392000"
            icon="el-icon-delete"
            type="danger"
            :disabled="selectedChildNode.length === 0"
            @click="deleteChild">
            删除
          </el-button>
        </div>
        <div>
          <el-button @click="reset">
            重置
          </el-button>
          <el-button
            v-oauth
            data-oauthUuid="1620438410000"
            type="primary"
            @click="showSearchDialog">
            查询
          </el-button>
        </div>
      </div>
      <div style="margin-top: 16px;">
        <scmsa-table
          ref="childTable"
          v-loading="childLoading"
          :column="childTablecolumn"
          :data="childTableDatas"
          pagination
          :height="tableTopHeight"
          :total="childTotal"
          border
          align="center"
          :current-page="childQuery.page"
          :page-size="childQuery.size"
          :row-key="(row) => row.id"
          @selection-change="childSelectionRowsChange"
          @size-change="childHandlePageSizeChange"
          @pagination-current-change="childHandlePageCurrentChange" />
      </div>
    </div>
    <el-dialog
      v-if="showSearchMod"
      v-dialogDrag="showSearchMod"
      :close-on-click-modal="false"
      title="搜索"
      width="60%"
      :visible.sync="showSearchMod">
      <query-form
        ref="qform"
        :is-more-query="true"
        :options="searchOptions"
        @cancel="onCancel"
        @query="onOrgSearch" />
    </el-dialog>
    <topModel
      ref="topModel"
      @appendData="appendData" />
    <childModel
      ref="childModel"
      @appendData="appendData" />
  </div>
</template>

<script>
  import colume from './colume'
  import { deepClone } from '@/utils/index'
  import Api from '@/api/sellManage.js'
  import topModel from './topModel'
  import childModel from './childModel'

  export default {
    name: 'SellManage',
    components: {
      topModel,
      childModel
    },
    mixins: [colume],
    data() {
      return {
        currentRow: '',
        selectedChildNode: [],
        selectedTableNode: [],
        childLoading: false,
        childTableDatas: [],
        childTotal: 0,
        childQuery: {
          page: 1,
          size: 10
        },
        showSearchMod: false,
        loading: false,
        tableDatas: [],
        total: 0,
        query: {
          page: 1,
          size: 10
        }
      }
    },
    computed: {
      tableTopHeight() {
        return this.$store.state.settings.tableHeight * 0.44
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      appendData(type) {
        if (type === 'refreshTop') {
          this.refreshList(true)
        } else if (type === 'refreshChild') {
          this.refreshChild()
        }
      },
      reset() {
        if (this.queryForm) {
          for (const key in this.queryForm) {
            if (Object.hasOwnProperty.call(this.queryForm, key)) {
              this.queryForm[key] = undefined
            }
          }
        }
        this.onOrgSearch({}, 'search')
      },
      showSearchDialog() {
        if (this.queryForm) {
          for (const key in this.queryForm) {
            if (Object.hasOwnProperty.call(this.queryForm, key)) {
              const element = this.queryForm[key]
              this.searchOptions.some(ii => {
                if (ii.key === key) {
                  ii.defaultVal = element
                  return true
                }
              })
            }
          }
        }
        this.showSearchMod = true
      },
      onCancel() {
        this.showSearchMod = false
      },
      // 查询搜索
      onOrgSearch(queryParms, type) {
        this.searchType = type
        this.queryForm = deepClone(queryParms)
        this.query = {
          page: 1,
          size: this.query.size,
          ...queryParms
        }
        if (queryParms.receiveTime) {
          this.query.receiveTimeStart = new Date(queryParms.receiveTime[0].replace(/-/g, '/'))
          this.query.receiveTimeEnd = new Date(queryParms.receiveTime[1].replace(/-/g, '/'))
          delete this.query.receiveTime
        }
        this.refreshList(true)
      },
      init() {
        this.refreshList(true)
      },
      handleCurrentChange(val) {
        this.currentRow = val
        this.childQuery.page = 1
        this.childQuery.size = 10
        this.childQuery.orderNo = this.currentRow.id
        this.refreshChild()
      },
      selectionRowsChange(e) {
        this.selectedTableNode = e
      },
      // 每页条数发生改变时返回值
      handlePageSizeChange(v) {
        this.query.size = v
        this.query.page = 1
        this.refreshList()
      },
      // 当前选中页发生改变时返回值
      handlePageCurrentChange(v) {
        this.query.page = v
        this.refreshList()
      },
      refreshList(loading) {
        this.loading = loading
        Api.getList(this.query).then(data => {
          this.tableDatas = data.data
          this.total = data.total
          this.loading = false
        }, () => {
          this.tableDatas = []
          this.total = 0
          this.loading = false
        })
      },
      modifyTop(row) {
        this.$refs.topModel.show(row.id ? row : this.selectedTableNode[0])
      },
      deleteTop(row) {
        let msg = ''
        let ids = []
        if (row && row.id) {
          ids = [row.id]
          msg = '请确认是否删除该销售订单？'
        } else {
          ids = this.selectedTableNode.map((item) => item.id)
          msg = '请确认是否删除已选销售订单？'
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Api.mulDelete(ids).then(() => {
            this.$refs.table.clearSelection()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refreshList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      createTop() {
        this.$refs.topModel.show()
      },
      // 确认
      comfirm() {
        this.$confirm('是否对已选销售订单进行确认操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.table.clearSelection()
          this.$message({
            type: 'success',
            message: '确认成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确认'
          })
        })
      },
      // 生产
      product() {
        this.$confirm('是否对已选销售订单进行确认生产操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.table.clearSelection()
          this.$message({
            type: 'success',
            message: '确认生产成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确认生产'
          })
        })
      },
      childSelectionRowsChange(e) {
        this.selectedChildNode = e
      },
      // 每页条数发生改变时返回值
      childHandlePageSizeChange(v) {
        this.childQuery.size = v
        this.childQuery.page = 1
        this.refreshChild()
      },
      // 当前选中页发生改变时返回值
      childHandlePageCurrentChange(v) {
        this.childQuery.page = v
        this.refreshChild()
      },
      refreshChild() {
        this.childLoading = true
        Api.getChildList(this.childQuery).then(data => {
          this.childTableDatas = data.data
          this.childTotal = data.total
          this.childLoading = false
        }, () => {
          this.childTableDatas = []
          this.childTotal = 0
          this.childLoading = false
        })
      },
      createChild() {
        this.$refs.childModel.show()
      },
      modifyChild(row) {
        this.$refs.childModel.show(row.id ? row : this.selectedChildNode[0])
      },
      deleteChild(row) {
        let msg = ''
        let ids = []
        if (row && row.id) {
          ids = [row.id]
          msg = '请确认是否删除该销售订单子项？'
        } else {
          ids = this.selectedChildNode.map((item) => item.id)
          msg = '请确认是否删除已选销售订单子项？'
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Api.mulDeleteChild(ids).then(() => {
            this.$refs.chidlTable.clearSelection()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refreshList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
